{% extends "base_generic.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-body">
                <h1 class="card-title">{{ book.title }}</h1>
                <p class="text-muted">by <a href="{{ book.author.get_absolute_url }}">{{ book.author }}</a></p>
                
                <div class="mb-3">
                    <strong>ISBN:</strong> {{ book.isbn }}
                </div>
                
                <div class="mb-3">
                    <strong>Genre:</strong> {{ book.display_genre }}
                </div>
                
                <div class="mb-3">
                    <strong>Language:</strong> {{ book.language }}
                </div>
                
                <div class="mb-3">
                    <h4>Summary</h4>
                    <p>{{ book.summary }}</p>
                </div>
                <div class="mb-3">
                  {% if user.is_authenticated %}
                    <button id="like-btn" class="btn btn-outline-danger" data-liked="{{ liked|yesno:'true,false' }}">
                      <span id="like-icon">{% if liked %}&#10084;{% else %}&#9825;{% endif %}</span>
                      <span id="like-count">{{ like_count }}</span> Like
                    </button>
                  {% else %}
                    <span class="text-muted">登录后可点赞</span>
                  {% endif %}
                </div>
            </div>
        </div>

        <!-- 评论部分 -->
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Reviews</h3>
                
                {% if user.is_authenticated %}
                <div class="mb-4">
                    <a href="{% url 'add-review' book.pk %}" class="btn btn-primary">
                        <i class="fas fa-pen"></i> Write a Review
                    </a>
                </div>
                {% endif %}
                
                {% if reviews %}
                    {% for review in reviews %}
                    <div class="review mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="rating">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= review.rating %}
                                        <i class="fas fa-star"></i>
                                    {% else %}
                                        <i class="far fa-star"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <small class="text-muted">{{ review.created_at|date:"F j, Y" }}</small>
                        </div>
                        <p class="review-text">{{ review.comment }}</p>
                        <small class="text-muted">- {{ review.user.username }}</small>
                    </div>
                    {% endfor %}
                {% else %}
                    <p>No reviews yet. Be the first to review this book!</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        {% if book.bookinstance_set.all %}
        <!-- 图书副本信息 -->
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title">Copies</h4>
{% for copy in book.bookinstance_set.all %}
                <div class="mb-3">
                    <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">
                        {{ copy.get_status_display }}
                    </p>
                    {% if copy.status == 'a' %}
                        <form method="post" action="{% url 'borrow-book-instance' copy.id %}" style="display:inline;">
                          {% csrf_token %}
                          <button type="submit" class="btn btn-success btn-sm">借阅</button>
                        </form>
                    {% elif copy.status != 'a' %}
                        <p><strong>Due back:</strong> {{ copy.due_back }}</p>
                    {% endif %}
                    <p><strong>Imprint:</strong> {{ copy.imprint }}</p>
                    <p class="text-muted"><strong>Id:</strong> {{ copy.id }}</p>
                </div>
{% endfor %}
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Quick Actions</h4>
                <div class="d-grid gap-2">
                    {% if perms.catalog.can_mark_returned %}
                    <a href="{% url 'renew-book-librarian' book.bookinstance_set.first.id %}" class="btn btn-primary">
                        <i class="fas fa-sync"></i> Renew Book
                    </a>
                    {% endif %}
                    {% if perms.catalog.change_book %}
                    <a href="{% url 'book-update' book.id %}" class="btn btn-secondary">
                        <i class="fas fa-edit"></i> Edit Book
                    </a>
                    {% endif %}
                    {% if perms.catalog.delete_book %}
                    <a href="{% url 'book-delete' book.id %}" class="btn btn-danger">
                        <i class="fas fa-trash"></i> Delete Book
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}


{% block sidebar %}
  {{ block.super }}

  {% if perms.catalog.change_book or perms.catalog.delete_book %}
  <hr>
  <ul class="sidebar-nav">
    {% if perms.catalog.change_book %}
      <li><a href="{% url 'book-update' book.id %}">Update Book</a></li>
    {% endif %}
    {% if not book.bookinstance_set.all and perms.catalog.delete_book %}
      <li><a href="{% url 'book-delete' book.id %}">Delete Book</a></li>
    {% endif %}
    </ul>
  {% endif %}

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById('like-btn');
  if (!btn) return;
  btn.addEventListener('click', function() {
    fetch(window.location.pathname + 'like/', {
      method: 'POST',
      headers: {
        'X-CSRFToken': '{{ csrf_token }}',
        'X-Requested-With': 'XMLHttpRequest',
      },
      credentials: 'same-origin',
    })
    .then(response => response.json())
    .then(data => {
      document.getElementById('like-count').textContent = data.like_count;
      var icon = document.getElementById('like-icon');
      if (data.liked) {
        icon.innerHTML = '&#10084;';
        btn.setAttribute('data-liked', 'true');
      } else {
        icon.innerHTML = '&#9825;';
        btn.setAttribute('data-liked', 'false');
      }
    });
  });
});
</script>
{% endblock %}
